<template>
  <div>
    <el-col :span="6" class="container-system">
      <el-col :span="24">
        <div class="org-tree-manage">
          <p class="department-manage">部门管理</p>
          <OrgTree :showCheckbox="false" :showOperateBtn="true" />
        </div>
      </el-col>
    </el-col>
    <el-col :span="17" class="container-system manage-system">
      <p class="department-manage">职位管理</p>

      <h-table-list
        border
        type="local"
        ref="tableRef"
        :page-sizes="[10, 20]"
        :data="system_department.records"
        @size-change="handleSizeChange"
        :columns="columns"
        :paginationInfo="paginationInfo"
        :form-options="formOptions"
      >
        <ListOpearteButton />

        <template slot="operate-column" slot-scope="scope">
          <tableButton :row="scope.row" />
        </template>
      </h-table-list>
    </el-col>
    <DownloadIdentify
      @cancel="cancel"
      @update="dialogSubmit"
      :visible.sync="dialogVisible"
      title="职位管理"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="职位名称" prop="positionsName">
          <el-input v-model="ruleForm.positionsName" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level">
          <el-select v-model="ruleForm.level" placeholder="级别">
            <el-option label="一级" :value="1"></el-option>
            <el-option label="二级" :value="2"></el-option>
            <el-option label="三级" :value="3"></el-option>
            <el-option label="四级" :value="4"></el-option>
            <el-option label="五级" :value="5"></el-option>
            <el-option label="六级" :value="6"></el-option>
            <el-option label="七级" :value="7"></el-option>
            <el-option label="八级" :value="8"></el-option>
            <el-option label="九级" :value="9"></el-option>
            <el-option label="十级" :value="10"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </DownloadIdentify>
  </div>
</template>

<script>
import OrgTree from "@/components/orgTree";
import DownloadIdentify from "@/components/FormDialog";
import TableAndButton from "@/components/TableAndButton";
import Pagination from "@/components/Pagination";
import data from "./const";
import { fetchDepartmentList } from "@/api/system";
import { mapState, mapMutations } from "vuex";
import ListOpearteButton from "@/components/AllButton/button2";
import tableButton from "@/components/AllButton/button3";
export default {
  components: {
    OrgTree,
    DownloadIdentify,
    Pagination,
    ListOpearteButton,
    tableButton,
    ListOpearteButton,
  },
  data() {
    return {
      ruleForm: {
        positionsName: "",
        level: "",
      },
      rules: {
        level: [{ required: true, message: "请选择级别", trigger: "change" }],
        positionsName: [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [{ required: true, message: "请选择", trigger: "change" }],
      },
      tableKey: 2,
      dialogVisible: false,
      data,
      dialogFormVisible: false,
      loadList: false,
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
          this.$store.dispatch("system_department/setListSearchParams", {
            current: e,
          });
          this.getList(
            Object.assign(
              {},
              this.$store.state.system_department.listSearchParams
            )
          );
        },
        current: 1,
        total: 10,
      },
      formOptions: {
        inline: true,
        submitBtnText: "新增",
        showSearchBtn: false,
        showResetBtn: false,
        searchParamsHandler: (params) => {
          console.log("新增");
          //this.dialogVisible = true;
          //this.getList(this.$store.state.system_department.listSearchParams);
          this.getList(params);
        },
        changevalue: (params) => {
          //   const forms=this.formOptions.forms.map(e=>{
          //      const key=e.prop
          //      e.defaultValue=params[key]
          //     return e
          //    })
          //  console.log(forms)
          console.log(params);
          this.$store.dispatch("system_department/setListSearchParams", params);
        },
        resetBtnCallback: () => {
          this.$store.dispatch("system_department/setListSearchParams", {});
          this.getList(this.$store.state.system_department.listSearchParams);
        },
        forms: [],
      },
      columns: [
        { type: "index", prop: "repNumber", label: "序号", width: 100 },

        {
          prop: "positionsName",
          label: "职位名称",
          width: 100,
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "level",
          label: "级别",
          width: 100,
          render: (row) => {
            const { level } = row;
            return level + "级";
          },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        { prop: "persons", label: "当前人数", minWidth: 180 },

        {
          prop: "operate",
          label: "操作",
          minWidth: 240,
          slotName: "operate-column",
          fixed: "right",
        },
      ],
      orgData: [],
    };
  },
  created() {
    //this.getDepartmentList()

    this.$store
      .dispatch(this.$store_url_button, {
        add: this.add,
        export: this.export,
        delete: this.delete,
        edit: this.edit,
        detail: this.detail,
        using: this.using,
        useless: this.useless,
        downloadTemplete: this.downloadTemplete,
        downloadIdentify: this.downloadIdentify,
      })
      .then(async () => {
        //await this.$store.dispatch("app/getCodeList", []); //code转码
        this.getList(); // 表格数据
      });
  },
  computed: {
    ...mapState(["system", "app", "system_department"]),
  },
  methods: {
    dialogSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.$store
            .dispatch("system_department/saveDeviceInfo", this.ruleForm)
            .then((res) => {
              this.dialogVisible = false;
              //this.getList();
              this.$refs.tableRef.$refs.searchForm.resetBtnCallback();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    getDepartmentList(args) {
      fetchDepartmentList(args).then((response) => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
        // Just to simulate the time of the request
      });
    },
    async getList(args) {
      // this.listLoading = true
      console.log(args);
      await this.$store.dispatch("system_department/requestDeviceList", args);
      this.paginationInfo.total = this.$store.state.system_department.total;
    },
    add(row) {
      this.ruleForm = {};
      this.dialogVisible = true;
    },
    edit(row) {
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    delete(row) {
      console.log(row);
      this.$confirm(`确认删除该职位？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store
            .dispatch("system_department/deleteDeviceInfo", row.id)
            .then((response) => {
              // this.$message({
              //   type: "success",
              //   message: "删除成功!"
              // });
              // 重置查询参数
              this.$refs.tableRef.$refs.searchForm.resetBtnCallback();
              // this.getList();
            })
            .catch((e) => {
              // this.$message({
              //   type: "info",
              //   message: "删除失败",
              // });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.container-system {
  background: #fff;
  padding: 0px 20px 10px 20px;
  .department-manage {
    padding: 20px 0;
    border-bottom: 2px solid #eee;
  }
  .el-tree {
    background: white;
  }
}
.manage-system {
  padding: 0 20px;
  margin-left: 20px;
}
</style>
